<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Echart加载地图</title>
    <link rel="stylesheet" type="text/css" href="lib/leaflet.css">
    <link rel="stylesheet" type="text/css" href="css/map.css">
    <script src="lib/jquery-3.3.1.min.js"></script>
    <script src="lib/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    var map = L.map("map", {
        center: [41.111962, 85.203633],
        zoom: 4,
        attributionControl: false,//隐藏logo
        zoomControl: false,//隐藏缩放按钮
        dragging: false,//禁止平移
        zoomDelta: 0,
        zoomSnap: 0,
        boxZoom: false,//禁止shift键缩放
        keyboard: false,//禁止键盘事件
        scrollWheelZoom: false,//禁止滚轮缩放
        markerZoomAnimation: false,
        zoomAnimation: false
    });
    map.fitBounds([[33.594328499, 72.072726696], [49.916943932, 97.850140125]]);//调整地图范围
    var mapEvent = {
        //鼠标经过事件
        mouseOver: function (e) {
            if (!e.target.choosed) {
                e.target.bringToFront();//选中位于最上层
                e.target.setStyle({fillColor: "#ff0000"});//改变选中颜色
            }
        },
        //鼠标移出事件
        mouseOut: function (e) {
            if (!e.target.choosed) {
                e.target.bringToBack();
                e.target.setStyle({fillColor: getColorByFid(e.target.fid )});
            }
        },
        //点击事件
        mouseClick: function (e) {
            removeLayer("info");
            //清除选中状态
            map.eachLayer(function (layer) {
                if (layer.type === 1) {
                    layer.choosed = false;
                    layer.setStyle({fillColor:getColorByFid(layer.fid)});//恢复默认颜色
                }
            });
            //设置选中状态
            e.target.choosed = true;
            e.target.bringToFront();//选中位于最上层
            e.target.setStyle({fillColor: "#82E2F9"});//改变选中颜色

            var center = e.target.getCenter();
            //添加闪烁点
            var html_flare = "<div><img src='img/center.png'></div>";
            var flare = L.divIcon({html: html_flare, className: "flare", iconSize: [30, 30], iconAnchor: [15, 15]});
            L.marker(center, {icon: flare, attribution: "info", interactive: false}).addTo(map);
            //添加折线
            var html = "<div></div>";
            var myIcon = L.divIcon({html: html, className: "infoDiv", iconSize: [100, 50], iconAnchor: [100, 50]});
            L.marker(center, {icon: myIcon, attribution: "info", interactive: false}).addTo(map);
            //添加地点文字，计算提示文字位置
            var body = $("body");
            var screenWidth = body.width();
            var line = $(".infoDiv div:first-child");
            var top_line = line.offset().top;
            var left_line = line.offset().left;

            var right_text = screenWidth - left_line;
            var top_text = top_line - 7;
            var placeTitle = $("<div></div>");
            placeTitle.text(e.target.name);
            placeTitle.addClass("placeTitle");
            placeTitle.css("right", right_text + "px");
            placeTitle.css("top", top_text + "px");
            body.append(placeTitle)
        },
        style: {
            color: "#FFFFFF",//线颜色
            fill: true,
            fillColor: "#7EBCFF",//填充色
            fillOpacity: 1,//填充透明度
            // smoothFactor: 1.5,//简化点
            weight: 1//线宽
        }
    };
    //地图容器形变事件,更新点击信息提示位置
    map.on("resize", function () {
        map.eachLayer(function (layer) {
            if (layer.type === 1 && layer.choosed) {
                mapEvent.mouseClick({target: layer})
            }
        });
    });
    //请求本地数据，绘制图形
    $.get("data/data.json", function (data, status) {
        if (status === "success") {
            var style=mapEvent.style;
            data.features.forEach(function (feature) {
                var latLngs = getCoordinate(feature.geometry.rings[0]);
                var polygon;
                style.fillColor=getColorByFid(feature.attributes.fid);
                switch (feature.attributes.fid) {
                    case 11://塔城地区，内环
                        var coordinates_t = getCoordinate(feature.geometry.rings[1]);
                        polygon = L.polygon([latLngs, coordinates_t], style).addTo(map);
                        break;
                    case 13:
                    case 14://伊犁哈萨克自治州、克拉玛依市，两个多边形
                        var coordinates_k = getCoordinate(feature.geometry.rings[1]);
                        polygon = L.polygon([[latLngs], [coordinates_k]], style).addTo(map);
                        break;
                    default:
                        polygon = L.polygon(latLngs, style).addTo(map);
                        break;
                }
                polygon.name = feature.attributes.name;
                polygon.fid = feature.attributes.fid;
                polygon.type = 1;
                polygon.on("mouseout", mapEvent.mouseOut);
                polygon.on("mouseover", mapEvent.mouseOver);
                polygon.on("click", mapEvent.mouseClick);
                //默认选择乌鲁木齐市
                if (polygon.fid === 2) {
                    mapEvent.mouseClick({target: polygon});
                }
            });
        }
    });

    /**
     * 将json坐标格式转换
     */
    function getCoordinate(coordinates) {
        var coord = [];
        coordinates.forEach(function (coordinate) {
            coord.push([coordinate[1], coordinate[0]]);
        });
        return coord;
    }

    /**
     * 根据名字移除图层
     * @param name [string] 图层名称
     */
    function removeLayer(name) {
        map.eachLayer(function (layer) {
            if (layer.getAttribution() === name) {
                map.removeLayer(layer);
            }
        });
        //移除文字提示
        $(".placeTitle").remove();
    }

    /**
     * 根据fid获取颜色,不同市设置不同默认颜色
     * @param fid json中地区编号
     */
    function getColorByFid(fid) {
        if(fid===9||fid===7||fid===8||fid===0){
            return "#99C6FF";
        }else {
            return "#7EBCFF";
        }
    }

</script>
</body>
</html>